<template>
  <div class="customerInfoDetail_module">
    <el-tabs 
    
    v-model="currentTab">
    <el-tab-pane v-for="(item) in tabList" :key="item.code" :name="item.code" :label="item.title">
    </el-tab-pane>
    
    </el-tabs>
      <div class="content">
        <template v-if="currentTab === 'basicInformation'">
        <basicInformation></basicInformation>
      </template>
      <template v-if="currentTab === 'followUpRecords'">
        <followUpRecords></followUpRecords>
      </template>
      <template v-if="currentTab === 'storeInformation'">
        <storeInformation></storeInformation>
      </template>
      </div>

  </div>
</template>

<script setup lang="ts">
  import {ref} from "vue"
  import basicInformation from "./components/basicInformation.vue"
  import followUpRecords from "./components/followUpRecords.vue"
  import storeInformation from "./components/storeInformation.vue"
  interface TabLstDataType {
    title:string
    code: string
  }
  const currentTab = ref("basicInformation")
  const tabList = ref<TabLstDataType[]>([
    {
      title: "基础信息",
      code: "basicInformation"
    },
    {
      title: "跟进记录",
      code: "followUpRecords"
    },
    {
      title: "店铺信息",
      code: "storeInformation"
    }
  ])
</script>
<style>

</style>
<style scoped>
.customerInfoDetail_module {
  height: calc(100% - 40px);
}
.content {
  padding: 10px 20px;
  height: calc(100% - 43px);
  overflow-y: auto;
  box-sizing: border-box;
}
</style>